<template>
    <div class="app-container">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>插件信息</span>
        </div>
        <div style="display: flex">
          <div style="width: 240px;">
            <el-carousel height="240px" style="width: 240px;">
              <el-carousel-item v-for="item in (info.thumbnail|| '').split(',')" :key="item">
                <img style="width:236px;height:236px" :src="item" class="image">
              </el-carousel-item>
            </el-carousel>
          </div>
          <div style="flex: 3;margin-left: 20px">
            <div>{{info.name}}</div>
            <div>售价：{{info.price}}</div>
            <div>安装数量：{{info.install}}</div>
            <div>付费安装：{{info.paidInstall}}</div>
            <div>适用平台：
              <span v-for="pm in info.platform" :key="pm">
                {{getDictDataLabel(DICT_TYPE.APP_MARKT_PLATFORM, pm ) }}
              </span>
            </div>
            <div>浏览量：{{info.browse}}</div>
            <div>是否加密：{{getDictDataLabel(DICT_TYPE.SYS_WHETHER_TYPE, info.encrypt)}}</div>
            <div>最新版本：{{info.record.sn}}</div>
          </div>
        </div>
      </el-card>

      <el-card class="box-card mt10">
        <div slot="header" class="clearfix">
          <span>插件介绍</span>
        </div>
        <div v-html="info.record.content">

        </div>
      </el-card>
    </div>
</template>

<script>
import {DICT_TYPE, getDictDataLabel} from "@/utils/dict";
import { getApp } from "@/api/product/market";
export default {
  components: {},
  name: "info",
  data(){
    return{
      thumbnailList:[],
      info:{
        record:{}
      }
    }
  },
  created() {
    debugger
    if (this.$route.query.id) {
      this.id =  this.$route.query.id;
      this.getInfo();
    }
  },
  computed:{

  },
  methods:{
    getInfo(){
      getApp(this.id).then(response => {
        debugger
        this.info = response.data;
        this.thumbnailList = this.info.thumbnail.split(',')
        debugger
      });
    },
    arrowClick(val) {
      if(val === 'next') {
        this.$refs.cardShow.next()
      } else {
        this.$refs.cardShow.prev()
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>
